// 导入基础包
import React, { useEffect } from 'react'
import { connect, history } from 'umi'

// 导入处理函数
import { print_table } from '../../utils/print'

import { Row, Col, Button, Divider } from 'antd'

import css from './file.less'

const PageView = (props) => {

    const { global: state, dispatch } = props
    const fv = state.file_view
    const cols = state.table_cols

    // 禁用默认事件
    useEffect(() => {
        window.onresize = () => {
            dispatch({ type: 'global/save', payload: { root_height: document.body.offsetHeight } })
        }
    })

    const get_title = (id) => {
        return cols[id].title
    }
    const get_value = (id) => {
        return typeof fv[cols[id].key] === 'string' ?
            fv[cols[id].key] :
            fv[cols[id].key].map((e, i) =>
                <p key={i}>{e}</p>
            );
    }


    return (
        <div>
            <div className={css.btn}>
                <Button onClick={() => history.push('/')}>返回列表页</Button>
                <Divider type="vertical" />
                <Button onClick={() => print_table('info')}>打印</Button>
                <Divider type="vertical" />
                <Button>编辑</Button>
            </div>
            {Object.keys(fv).length !== 0 ?
                <div id='info' className={css.info} style={{ height: state.root_height - 90 }}>

                    <h2>{fv.xm} 个人档案详情</h2>
                    <table className={css.info_box} border={1} width='100%'>
                        <tbody>
                            <tr>
                                <td width='10%'>{get_title(0)}</td>
                                <td width='15%'>{get_value(0)}</td>
                                <td width='10%'>{get_title(1)}</td>
                                <td width='15%'>{get_value(1)}</td>

                                <td width='10%'>{get_title(2)}</td>
                                <td width='15%'>{get_value(2)}</td>
                                <td width='10%'>{get_title(3)}</td>
                                <td width='15%'>{get_value(3)}</td>
                            </tr>
                            <tr>
                                <td width='10%'>{get_title(4)}</td>
                                <td width='15%'>{get_value(4)}</td>
                                <td width='10%'>{get_title(5)}</td>
                                <td width='15%'>{get_value(5)}</td>

                                <td width='10%'>{get_title(6)}</td>
                                <td width='15%'>{get_value(6)}</td>
                                <td width='10%'>{get_title(7)}</td>
                                <td width='15%'>{get_value(7)}</td>
                            </tr>
                            <tr>
                                <td width='10%'>{get_title(8)}</td>
                                <td width='15%'>{get_value(8)}</td>
                                <td width='10%'>{get_title(9)}</td>
                                <td width='15%'>{get_value(9)}</td>

                                <td width='10%'>{get_title(2)}</td>
                                <td width='15%'>{get_value(2)}</td>
                                <td width='10%'>{get_title(3)}</td>
                                <td width='15%'>{get_value(3)}</td>
                            </tr>
                            <tr>
                                <td>{cols[12].title}</td>
                                <td>{fv[cols[12].key]}</td>
                                <td>{cols[13].title}</td>
                                <td>{fv[cols[13].key]}</td>

                                <td>{cols[14].title}</td>
                                <td>{fv[cols[14].key]}</td>
                                <td>{cols[15].title}</td>
                                <td>{fv[cols[15].key]}</td>
                            </tr>
                            <tr>
                                <td>{cols[16].title}</td>
                                <td>{fv[cols[16].key]}</td>
                                <td>{cols[17].title}</td>
                                <td>{fv[cols[17].key]}</td>

                                <td>{cols[18].title}</td>
                                <td>{fv[cols[18].key]}</td>
                                <td>{cols[19].title}</td>
                                <td>{fv[cols[19].key]}</td>
                            </tr>
                            <tr>
                                <td>{cols[20].title}</td>
                                <td colSpan={7}>{fv[cols[20].key]}</td>
                            </tr>
                            <tr>
                                <td colSpan={8}>
                                    <h3>图片档案：</h3>
                                    {/* <Row gutter={[16, 20]}>
                                    {[1, 2, 3, 4, 5].map((k, id) =>
                                        <Col key={id} span={6}>
                                            <img src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" alt={k} />
                                        </Col>
                                    )}
                                </Row> */}
                                </td>
                            </tr>

                        </tbody>
                    </table>

                </div>
                : null}
        </div>
    )
}

export default connect(({ global, loading }) => ({ global, loading }))(PageView)